<template>
  <div class="searchBox">
    <div class="searchInputBox">
      <input
        type="text"
        v-model="searchTxt"
        class="searchTxt"
        @keydown.enter="pushSearch"
      />
      <div class="submitBtn"></div>
    </div>
    <div class="tabBar">
      <ul class="singer_category">
        <router-link
          tag="li"
          :to="{
            name: 'search',
            query: { type: item.id, name: $route.query.name },
          }"
          v-for="item in typeArr"
          :key="item.id"
          :class="$route.query.type == item.id && 'yes_select'"
        >
          {{ item.name }}
        </router-link>
      </ul>
    </div>
    <div>
      <Single ref="single" v-show="$route.query.type == 1" />
      <Album ref="album" v-show="$route.query.type == 10" />
      <Singer ref="singer" v-show="$route.query.type == 100" />
      <SongSheet ref="songSheet" v-show="$route.query.type == 1000" />
      <User ref="user" v-show="$route.query.type == 1002" />
      <RadioStation ref="radioStation" v-show="$route.query.type == 1009" />
    </div>
  </div>
</template>

<script>
import Single from "@/views/Search/single.vue";
import Singer from "@/views/Search/singer.vue";
import Album from "@/views/Search/album.vue";
import SongSheet from "@/views/Search/songSheet.vue";
import User from "@/views/Search/user.vue";
import RadioStation from "@/views/Search/radioStation.vue";
export default {
  data() {
    return {
      searchTxt: this.$route.query.name,
      // 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
      typeArr: [
        { id: 1, name: "单曲" },
        { id: 10, name: "专辑" },
        { id: 100, name: "歌手" },
        { id: 1000, name: "歌单" },
        { id: 1002, name: "用户" },
        { id: 1009, name: "电台" },
      ],
    };
  },
  components: {
    Single,
    Album,
    Singer,
    SongSheet,
    User,
    RadioStation,
  },
  methods: {
    pushSearch() {
      if (!this.searchTxt.trim()) return;
      this.$router.push({
        name: "search",
        query: { name: this.searchTxt, type: 1 },
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    console.log(45);
    next();
    if (to.query.name != from.query.name) {
      this.$refs.single.contnetPage = 1;
      this.$refs.album.contnetPage = 1;
      this.$refs.singer.contnetPage = 1;
      this.$refs.songSheet.contnetPage = 1;
      this.$refs.user.contnetPage = 1;
      this.$refs.radioStation.contnetPage = 1;
      this.$refs.single.getData();
      this.$refs.album.getData();
      this.$refs.singer.getData();
      this.$refs.songSheet.getData();
      this.$refs.user.getData();
      this.$refs.radioStation.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
.searchBox {
  padding: 40px;
  box-sizing: border-box;
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  .searchInputBox {
    display: flex;
    width: 420px;
    height: 40px;
    background: url("./../../assets/imges/sprite.png") no-repeat 0 9999px;
    background-position: 0 0;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    .searchTxt {
      outline: none;
      background: transparent;
      border: none;
      flex: 1;
      padding: 0 20px;
    }
    .submitBtn {
      width: 50px;
      height: 40px;
    }
  }
  .tabBar {
    margin-top: 30px;
    .singer_category {
      display: flex;
      background: #f7f7f7;
      li {
        flex: 1;
        height: 37px;
        border-top: 2px solid #ccc;
        border-bottom: 1px solid #ccc;
        line-height: 37px;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        &:nth-child(1) {
          border-left: 1px solid #ccc;
        }
        &:last-child {
          border-right: 1px solid #ccc;
        }
        &.yes_select {
          margin-top: -1;
          border-bottom: none;
          border-right: 1px solid #ccc;
          border-left: 1px solid #ccc;
          border-top: 2px solid #d13030;
          background: #fff;
        }
        &:hover {
          border-top: 2px solid #d13030;
        }
      }
    }
  }
}
</style>